<script setup lang="ts">
import { onBeforeUnmount, onMounted, provide, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import { confirm, Page } from '@vben/common-ui';
import { useTabs } from '@vben/hooks';
import { ArrowLeft } from '@vben/icons';

import { Button, Card, message } from 'ant-design-vue';

import { getModelSimpleList } from '#/api/ai/model/model';
import { createWorkflow, getWorkflow, updateWorkflow } from '#/api/ai/workflow';
import { createModel, deployModel, updateModel } from '#/api/bpm/model';
import { AiModelTypeEnum, CommonStatusEnum } from '#/utils';

import BasicInfo from './modules/basic-info.vue';
import WorkflowDesign from './modules/workflow-design.vue';

defineOptions({ name: 'AiWorkflowCreate' });

const router = useRouter();

const route = useRoute();

// 基础信息组件引用
const basicInfoRef = ref<InstanceType<typeof BasicInfo>>();
// 工作流设计组件引用
const workflowDesignRef = ref<InstanceType<typeof WorkflowDesign>>();

/** 步骤校验函数 */
async function validateBasic() {
  await basicInfoRef.value?.validate();
}

/** 工作流设计校验 */
async function validateWorkflow() {
  await workflowDesignRef.value?.validate();
}

const currentStep = ref(-1); // 步骤控制。-1 用于，一开始全部不展示等当前页面数据初始化完成

const steps = [
  { title: '基本信息', validator: validateBasic },
  { title: '工作流设计', validator: validateWorkflow },
];

// 表单数据
const formData: any = ref({
  id: undefined,
  name: '',
  code: '',
  remark: '',
  graph: '',
  status: CommonStatusEnum.ENABLE,
});

const llmProvider = ref<any>([]);
const workflowData = ref<any>({});
provide('workflowData', workflowData);

/** 初始化数据 */
const actionType = route.params.type as string;

async function initData() {
  if (actionType === 'update') {
    const workflowId = route.params.id as string;
    formData.value = await getWorkflow(workflowId);
    workflowData.value = JSON.parse(formData.value.graph);
  }
  const models = await getModelSimpleList(AiModelTypeEnum.CHAT);
  llmProvider.value = {
    llm: () =>
      models.map(({ id, name }) => ({
        value: id,
        label: name,
      })),
    knowledge: () => [],
    internal: () => [],
  };

  // 设置当前步骤
  currentStep.value = 0;
}

/** 校验所有步骤数据是否完整 */
async function validateAllSteps() {
  // 基本信息校验
  try {
    await validateBasic();
  } catch {
    currentStep.value = 0;
    throw new Error('请完善基本信息');
  }

  // 表单设计校验
  try {
    await validateWorkflow();
  } catch {
    currentStep.value = 1;
    throw new Error('请完善工作流信息');
  }
  return true;
}

/** 保存操作 */
async function handleSave() {
  try {
    // 保存前校验所有步骤的数据
    await validateAllSteps();

    // 更新表单数据
    const data = {
      ...formData.value,
      graph: JSON.stringify(workflowData.value),
    };
    await (actionType === 'update'
      ? updateWorkflow(data)
      : createWorkflow(data));

    // 保存成功，提示并跳转到列表页
    message.success('保存成功');
    tabs.closeCurrentTab();
    await router.push({ name: 'AiWorkflow' });
  } catch (error: any) {
    console.error('保存失败:', error);
    message.warning(error.message || '请完善所有步骤的必填信息');
  }
}

/** 发布操作 */
async function handleDeploy() {
  try {
    // 修改场景下直接发布，新增场景下需要先确认
    if (!formData.value.id) {
      await confirm('是否确认发布该流程？');
    }
    // 校验所有步骤
    await validateAllSteps();

    // 更新表单数据
    const modelData = {
      ...formData.value,
    };

    // 先保存所有数据
    if (formData.value.id) {
      await updateModel(modelData);
    } else {
      const result = await createModel(modelData);
      formData.value.id = result.id;
    }

    // 发布
    await deployModel(formData.value.id);
    message.success('发布成功');
    // TODO 返回列表页
    await router.push({ name: '/ai/workflow' });
  } catch (error: any) {
    console.error('发布失败:', error);
    message.warning(error.message || '发布失败');
  }
}

/** 步骤切换处理 */
async function handleStepClick(index: number) {
  try {
    if (index !== 0) {
      await validateBasic();
    }
    if (index !== 1) {
      await validateWorkflow();
    }

    // 切换步骤
    currentStep.value = index;
  } catch (error) {
    console.error('步骤切换失败:', error);
    message.warning('请先完善当前步骤必填信息');
  }
}

const tabs = useTabs();

/** 返回列表页 */
function handleBack() {
  // 关闭当前页签
  tabs.closeCurrentTab();
  // 跳转到列表页，使用路径， 目前后端的路由 name： 'name'+ menuId
  router.push({ path: '/ai/workflow' });
}

/** 初始化 */
onMounted(async () => {
  await initData();
});

/** 添加组件卸载前的清理 */
onBeforeUnmount(() => {
  // 清理所有的引用
  basicInfoRef.value = undefined;
  workflowDesignRef.value = undefined;
});
</script>

<template>
  <Page auto-content-height>
    <div class="mx-auto">
      <!-- 头部导航栏 -->
      <div
        class="bg-card absolute inset-x-0 top-0 z-10 flex h-12 items-center border-b px-5"
      >
        <!-- 左侧标题 -->
        <div class="flex w-48 items-center overflow-hidden">
          <ArrowLeft
            class="size-5 flex-shrink-0 cursor-pointer"
            @click="handleBack"
          />
          <span
            class="ml-2.5 truncate text-base"
            :title="formData.name || '创建AI 工作流'"
          >
            {{ formData.name || '创建AI 工作流' }}
          </span>
        </div>

        <!-- 步骤条 -->
        <div class="flex h-full flex-1 items-center justify-center">
          <div class="flex h-full w-96 items-center justify-between">
            <div
              v-for="(step, index) in steps"
              :key="index"
              class="relative mx-4 flex h-full cursor-pointer items-center"
              :class="[
                currentStep === index
                  ? 'border-b-2 border-solid border-blue-500 text-blue-500'
                  : 'text-gray-500',
              ]"
              @click="handleStepClick(index)"
            >
              <div
                class="mr-2 flex h-7 w-7 items-center justify-center rounded-full border-2 border-solid text-base"
                :class="[
                  currentStep === index
                    ? 'border-blue-500 bg-blue-500 text-white'
                    : 'border-gray-300 bg-white text-gray-500',
                ]"
              >
                {{ index + 1 }}
              </div>
              <span class="whitespace-nowrap text-base font-bold">{{
                step.title
              }}</span>
            </div>
          </div>
        </div>

        <!-- 右侧按钮 -->
        <div class="flex w-48 items-center justify-end gap-2">
          <Button
            v-if="actionType === 'update'"
            type="primary"
            @click="handleDeploy"
          >
            发 布
          </Button>
          <Button type="primary" @click="handleSave">
            <span v-if="actionType === 'definition'">恢 复</span>
            <span v-else>保 存</span>
          </Button>
        </div>
      </div>
      <!-- 主体内容 -->
      <Card :body-style="{ padding: '10px' }" class="mb-4">
        <div class="mt-12">
          <!-- 第一步：基本信息 -->
          <div v-if="currentStep === 0" class="mx-auto w-4/6">
            <BasicInfo v-model="formData" ref="basicInfoRef" />
          </div>
          <!-- 第二步：表单设计  -->
          <WorkflowDesign
            v-if="currentStep === 1"
            v-model="formData"
            :provider="llmProvider"
            ref="workflowDesignRef"
          />
        </div>
      </Card>
    </div>
  </Page>
</template>
